<template>
    <el-table :data="tableData" style="width: 100%" :span-method="arraySpanMethod">
        <el-table-column prop="name" width="180"></el-table-column>
        <el-table-column :key="index" v-for="(viewData, index) in viewBodyData" :label="viewData.date" width="120">
        <template slot-scope="scope">
            <div v-for="(item, idx) in viewData.list" :key="idx">
                <div v-if="scope.row.type === item.type">
                    {{ item.name }}
                </div>
            </div>
        </template>
        </el-table-column>
    </el-table>
</template>

<script>
export default {
  data() {
      return {
        tableData: [{
            name: '急迫',
            type: 'jp'
        }, {
            name: '优先',
            type: 'yx'
        }, {
            name: '普通',
            type: 'pt'
        }, {
            name: '缺省',
            type: 'qs'
        }],
        viewBodyData: [{
            date: '2020-10-27',
            list: [
                { name: '19:27播放我的兄弟是顺溜', type: 'qs' },
                { name: '19:27播放我的兄弟是顺溜', type: 'yx' }
            ]
        },{
            date: '2020-10-28',
            list: [
                { name: '19:27播放我的兄弟是顺溜', type: 'jp' },
                { name: '19:27播放我的兄弟是顺溜', type: 'jp' },
                { name: '19:27播放我的兄弟是顺溜', type: 'jp' }
            ]
        },{
            date: '2020-10-29',
            list: [
                { name: '19:27播放我的兄弟是顺溜', type: 'pt' },
                { name: '19:27播放我的兄弟是顺溜', type: 'jp' }
            ]
        },{
            date: '2020-10-30',
            list: [
                { name: '19:27播放我的兄弟是顺溜', type: 'qs' },
                { name: '19:27播放我的兄弟是顺溜', type: 'yx' }
            ]
        }]
      }
  },
  props: {
      data: {
          default: []
      }
  },
  mounted() {
      this.$nextTick(function() {
      })
  },
  watch: {
      data(v) {
      }
  },
  methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-table tr {
    height: 90px;
}
</style>
